{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"发布任务",back:1} %}
    <div id="box" class="scrollX-Box bdtso bdbso">
        <mu-stepper :active-step="lactiveStep" style="width: 100vw" :linear="false">
            <mu-step class="s1">
                <mu-step-button @click="changeStep(0);scrollXTo('#box','.s1',0)">
                    选择类目
                </mu-step-button>
            </mu-step>
            <mu-step class="s1">
                <mu-step-button @click="changeStep(1);scrollXTo('#box','.s1',1)">
                    预约时间
                </mu-step-button>
            </mu-step>
            <mu-step class="s1">
                <mu-step-button @click="changeStep(2);scrollXTo('#box','.s1',2)">
                    任务内容
                </mu-step-button>
            </mu-step>
            <mu-step class="s1">
                <mu-step-button @click="changeStep(3);scrollXTo('#box','.s1',3)">
                    图片资料
                </mu-step-button>
            </mu-step>
            <mu-step class="s1">
                <mu-step-button @click="changeStep(4);scrollXTo('#box','.s1',4)">
                    客户信息
                </mu-step-button>
            </mu-step>
            <mu-step class="s1">
                <mu-step-button @click="changeStep(5);scrollXTo('#box','.s1',5)">
                    偏好设定
                </mu-step-button>
            </mu-step>
        </mu-stepper>
    </div>


    <div>
        {#1 选择类目#}
        <div class="bc13" v-if="lactiveStep == 0">
            <div class="flex-r flex-start fs8 flex-fill" style="width: 100vw;height: 80vh; overflow-y:scroll" >
                <div class="flex2 tac bdso bcf" style="overflow-y: scroll">
                    <div class="padt5 padb5 pos-r" :class="cat1Id == item.id ? 'bc1 c13':''" v-for="item in cats">
                        [[item.name]] <mu-ripple @click="scrollTo('item'+item.id)"></mu-ripple>
                    </div>
                </div>
                <div class="flex7 bc13 pad2 ofs" style="overflow-y: scroll">
                    <div v-for="item,rootIndex in cats">
                        <div :id="'item' + item.id" class="padt5">
                            <div class="list-style-1 mart10 marl2">[[item.name]]</div>
                            <div class="flex-r flex-start flex-wrap ">
                                <div class="bcf pad2 marr7 mart5 pos-r bdso" v-for="son,sonIndex in item.sons" :class="cat2Id == son.id ? ' bdc2':'bdc13'">
                                    <div>
                                        <img :src="picUrl(son.pic)" class="wh20-20" alt="" onerror="this.src=pic404">
                                    </div>
                                    <div class="tac mart2" :class="cat2Id == son.id ? 'c11':''">
                                        [[son.name]]
                                    </div>
                                    <mu-ripple @click="setCategory(item.id,son.id)"></mu-ripple>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

{#            <div class="bcf pad6 round3 bdbda fs9  c11">#}
{#                选择行业#}
{#            </div>#}
{#            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11">#}
{#                <div class="flex2 tac scrollX-Box">#}
{#                    <div class="scrollX-Item pad5 mar2 bdso pos-r" :class="cat1 == item.id ? 'bc13 c11':'bcf'"#}
{#                         v-for="item in cats">#}
{#                        <div>#}
{#                             <img :src="picUrl(item.pic)" class="wh20-20" alt="" onerror="this.src=pic404">#}
{#                        </div>#}
{#                        <div class="tac"> [[item.name]]</div>#}
{#                        <mu-ripple @click="setCat1(item.id,item)"></mu-ripple>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="bcf pad6 round3 bdbda fs9  c11" v-if="isTrue(cat1)">#}
{#                选择分类#}
{#            </div>#}
{#            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2" v-if="isTrue(cat1)">#}
{#                <div class="" v-for="item,index in cats">#}
{#                    <div :id="'item' + item.id" class="" v-show="cat1 == item.id">#}
{#                        <div class="scrollX-Box">#}
{#                            <div class="scrollX-Item bcf pad5 mar2 bdso pos-r" v-for="row in item.sons"#}
{#                                 :class="cat2 == item.id + '_' + row.id ? 'bc13 c11':'bcf'">#}
{#                                <div> <img :src="picUrl(row.pic)" class="wh20-20" alt="" onerror="this.src=pic404"></div>#}
{#                                <div class="tac"> [[row.name]]</div>#}
{#                                <mu-ripple @click="setCat2(row.id,row)"></mu-ripple>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
        </div>

        {#2 预约时间#}
        <div class="pad5 bc13 fs8 c12" v-if="lactiveStep == 1">
            <div class="bcf pad6 round3 bdbda fs9  c11">
                约定服务时间
            </div>
            <div class="bcf padlr6 padt10 round3 bdbda fs9 c12 fs8 c11 lh2">
                <mu-date-input container="bottomSheet" v-model="bookAt" type="dateTime" view-type="list"
                               full-width clock-type="24hr" landscape :min-date="new Date()"></mu-date-input>
            </div>

            <div class="padt9 ">其他参数</div>
            <div class="padt3">
                <div class="bcf flrc c11 fs9 pad5">
                    <div>提前预约：</div>
                    <div class="bdbso fs14">
                        <input style="width: 3em" class="inputPlain tac" type="text" v-model="callBefore">
                    </div>
                    <div class="flex1">分钟（服务前电话预约）</div>
                </div>
                <div class="flrc bcf padb5">
                    <div @click="callBefore = 5" class="btn-small bdso ripple round10 marr5">5</div>
                    <div @click="callBefore = 15" class="btn-small bdso ripple round10 marr5">15</div>
                    <div @click="callBefore = 30" class="btn-small bdso ripple round10 marr5">30</div>
                    <div @click="callBefore = 45" class="btn-small bdso ripple round10 marr5">45</div>
                    <div @click="callBefore = 60" class="btn-small bdso ripple round10">60</div>
                </div>
{#                <div class="pad5 bcf flrc fs20">#}
{#                    <div class="padlr5 padb5">0</div>#}
{#                    <div class="flex1"><mu-slider :size="15" class="demo-slider" :min="0" :max="60" :step="15" v-model="callBefore"></mu-slider></div>#}
{#                    <div class="padlr5 padb5">60</div>#}
{#                </div>#}
            </div>

            <div class="padt5">
                <div class="bcf flrc c11 fs9 pad5">
                    <div>有效时间：</div>
                    <div class="bdbso fs14">
                        <input style="width: 3em" class="inputPlain tac" type="text" v-model="expireAt">
                    </div>
                    <div class="flex1">天（发布之日起，多少天内有效）</div>
                </div>
                <div class="flrc bcf padb5">
                    <div @click="expireAt = 1" class="btn-small bdso ripple round10 marr5">1</div>
                    <div @click="expireAt = 7" class="btn-small bdso ripple round10 marr5">7</div>
                    <div @click="expireAt = 15" class="btn-small bdso ripple round10 marr5">15</div>
                    <div @click="expireAt = 20" class="btn-small bdso ripple round10 marr5">20</div>
                    <div @click="expireAt = 30" class="btn-small bdso ripple round10">30</div>
                </div>
{#                <div class="pad5 bcf flrc fs20">#}
{#                    <div class="padlr5 padb5">1</div>#}
{#                    <div class="flex1"><mu-slider :size="15" class="demo-slider" :min="3" :max="30" :step="1" v-model="expireAt"></mu-slider></div>#}
{#                    <div class="padlr5 padb5">30</div>#}
{#                </div>#}
            </div>
            <div class="flrc pad10">
                <div class="flex1" v-show="lactiveStep > 0">
                    <mu-button @click="vhandlePrev()" color="" full-width round>上一步</mu-button>
                </div>
                <div class="flex1"></div>
                <div class="flex1" v-show="lactiveStep < 5">
                    <mu-button @click="vhandleNext()" color="primary" full-width round>下一步</mu-button>
                </div>
            </div>
        </div>

        {#3 任务内容#}
        <div class=" bc13 pad5" v-if="lactiveStep == 2">
            <div class="bcf pad6 round3 bdbda fs9  c11">
                任务标题
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                    <mu-text-field v-model="title" max-length="20" full-width
                                   help-text="简单描述任务内容20字符以内"></mu-text-field>
            </div>
            <div class="bcf pad6 round3 bdbda fs9 mart5 c11">
                任务说明/注意事项/备注
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                <mu-text-field v-model="tips" full-width multi-line :rows="3"
                               max-length="200" :rows-max="6" help-text="任务内容，注意事项，有什么叮嘱师傅的也可以说哦！"></mu-text-field>
            </div>
            <div class="bcf pad6 round3 bdbda fs9  c11 flrc">
                <div class="flex1">定价方式</div>
                <div class="c12 padl10">
                    <mu-switch v-model="showPrice" @change="showPrice?'':price=0" :label="showPrice?'一口价':'投标竞价'"></mu-switch>
                </div>
            </div>
{#            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">#}
{#               #}
{#            </div>#}
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2" v-show="showPrice">
                <mu-text-field v-model="price" max-length="20" full-width type="number"
                               help-text="请填写价格"></mu-text-field>
            </div>

            <div class="flrc pad10">
                <div class="flex1" v-show="lactiveStep > 0">
                    <mu-button @click="vhandlePrev()" color="" full-width round>上一步</mu-button>
                </div>
                <div class="flex1"></div>
                <div class="flex1" v-show="lactiveStep < 5">
                    <mu-button @click="vhandleNext()" color="primary" full-width round>下一步</mu-button>
                </div>
            </div>
        </div>

        {#4 图片资料#}
        <div class="pad5 bc13" v-if="lactiveStep == 3">
            <div class="bcf pad6 round3 bdbda fs9  c11">
                增加附件资料
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
                <div class="scrollX-Box flex-start bcf pad5">
                    <div class="scrollX-Item marr5">
                        <div  @click="selectPic()" class="wh40-40 flcc bdso"> <img :src="picAdd" class="wh10-10 op3" alt="" onerror="this.src=pic404"></div>
                    </div>
                    <div class="wh40-40 scrollX-Item marr5 pos-r" v-for="item,index in picsV">
                         <img @click="showPic(index,picsV)" :src="item" class="wh40-40 scrollX-Item" alt="" onerror="this.src=pic404">
                        <div class="pos-a r0 b0 flrc op9">
                            <mu-button fab small color="black" @click="move(index,-1)">
                                <mu-icon value="arrow_back"></mu-icon>
                            </mu-button>
                            <mu-button fab small color="black" @click="move(index,1)">
                                <mu-icon value="arrow_forward"></mu-icon>
                            </mu-button>
                            <mu-button fab small color="black" @click="del(index)">
                                <mu-icon value="close"></mu-icon>
                            </mu-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flrc pad10">
                <div class="flex1" v-show="lactiveStep > 0">
                    <mu-button @click="vhandlePrev()" color="" full-width round>上一步</mu-button>
                </div>
                <div class="flex1"></div>
                <div class="flex1" v-show="lactiveStep < 5">
                    <mu-button @click="vhandleNext()" color="primary" full-width round>下一步</mu-button>
                </div>
            </div>
        </div>

        {#5 客户信息#}
        <div class="pad5 bc13" v-if="lactiveStep == 4">
            <div class="bcf pad6 round3 bdbda fs9  c11">
                选择位置
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2 pos-r">
                <div class="flex1 fs8">
                    <div>
                        [[isTrue(address.province)?address.province:"点击选择" ]]
                        [[isTrue(address.city)?address.city:"" ]]
                        [[isTrue(address.area)?address.area:"" ]]
                    </div>
                    <div>[[address.address]]</div>
                </div>
                <div class="c12 padl10">
                    <mu-ripple  @click="goto('myAddressSelect')"><span class="fa fa-angle-right"></span></mu-ripple>
                </div>

            </div>
            <div class="bcf pad6 round3 bdbda fs9 c11 mart5">
                选择联系人
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2 pos-r">
                <div class="flex1 flrc">
                    <div class="flex1"> [[isTrue(contact.name)?contact.name:"点击选择" ]]</div>
                    <div>[[contact.phone]]</div>
                </div>
                <div class="c12 padl10">
                        <span class="fa fa-angle-right"></span>
                </div>
                <mu-ripple  @click="goto('myContactSelect')"></mu-ripple>
            </div>

            <div class="flrc pad10">
                <div class="flex1" v-show="lactiveStep > 0">
                    <mu-button @click="vhandlePrev()" color="" full-width round>上一步</mu-button>
                </div>
                <div class="flex1"></div>
                <div class="flex1" v-show="lactiveStep < 5">
                    <mu-button @click="vhandleNext()" color="primary" full-width round>下一步</mu-button>
                </div>
            </div>
        </div>

{#        筛选控制#}
        <div class="pad5 bc13" v-if="lactiveStep == 5">
            <div class="bcf pad6 round3 bdbda fs9  c11">
                所在地区
            </div>
            <div class="bcf pad6 round3  fs9 c12 fs8 c11 lh2">
                <div class="flrc pad5 pos-r bdbda">
                    <div>省份</div>
                    <div class="flex1 tar" v-if="isTrue(province)">[[province]]</div>
                    <div class="flex1 tar" v-if="!isTrue(province)">不限制</div>
                    <div class="c12 padl10">
                        <span class="fa fa-angle-right"></span>
                    </div>
                    <mu-ripple  @click="pcaShowFunc()"></mu-ripple>
                </div>
                <div class="flrc pad5 pos-r bdbda">
                    <div>城市</div>
                    <div class="flex1 tar" v-if="isTrue(city)">[[city]]</div>
                    <div class="flex1 tar" v-if="!isTrue(city)">不限制</div>
                    <div class="c12 padl10">
                        <span class="fa fa-angle-right"></span>
                    </div>
                    <mu-ripple  @click="pcaShowFunc()"></mu-ripple>
                </div>
                <div class="flrc pad5 pos-r bdbda">
                    <div>县区</div>
                    <div class="flex1 tar" v-if="isTrue(area)">[[area]]</div>
                    <div class="flex1 tar" v-if="!isTrue(area)">不限制</div>
                    <div class="c12 padl10">
                        <span class="fa fa-angle-right"></span>
                    </div>
                    <mu-ripple  @click="pcaShowFunc()"></mu-ripple>
                </div>
            </div>
            <div class="bcf pad6 round3 bdbda fs9  c11 mart5">
                服务能力
            </div>
            <div class="bcf pad6 round3 fs9 c12 fs8 c11 lh2">
                <div class="flrc pad5 pos-r bdbda">
                    <div>优先雇佣保证金商家</div>
                    <div class="flex1"></div>
                    <div class="c12 padl10">
                        <mu-switch v-model="isInsurance" ></mu-switch>
                    </div>
                </div>
                <div class="flrc pad5 pos-r bdbda">
                    <div>优先雇佣认证商家</div>
                    <div class="flex1"></div>
                    <div class="c12 padl10">
                        <mu-switch v-model="isCompany" ></mu-switch>
                    </div>
                </div>
            </div>

            <div class="flrc pad10">
                <div class="flex1" v-show="lactiveStep > 0">
                    <mu-button @click="vhandlePrev()" color="" full-width round>上一步</mu-button>
                </div>
                <div class="flex1"></div>
                <div class="flex1">
                    <mu-button @click="submit()" :color="c1" round full-width>确认发布</mu-button>
                </div>
            </div>
        </div>
    </div>

{#    <div class="pad10"  v-if="lactiveStep == 5">#}
{#        <mu-button @click="submit()" large :color="c1" round full-width>确认发布</mu-button>#}
{#    </div>#}

{#    <div class="pad10 bc13">#}
{#        <div class="pad5 c1"><span class="fa fa-warning op7"></span> 注意事项</div>#}
{#        <div class="fs8 c11 lh2 pad5 op6">#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷；#}
{#            请务必查看此注意事项，否则会引起纠纷。#}
{#        </div>#}
{#    </div>#}

{#    <div class="flrc padlr5 pos-f l0 r0 b9 padb20">#}
{#        <div v-show="lactiveStep > 0"><mu-button @click="vhandlePrev()" fab color="primary" ><mu-icon value="undo"></mu-icon></mu-button></div>#}
{#        <div class="flex1"></div>#}
{#        <div v-show="lactiveStep < 5"><mu-button @click="vhandleNext()" fab color="primary" ><mu-icon value="redo"></mu-icon></mu-button></div>#}
{#    </div>#}



    <div class="pos-f b0 l0 r0  bcf shadow3" style="height: 50vh;overflow-y: scroll;" v-if="pcaShow">
        <div class="pos-f l0 r0 bcf fs8 c12 lh2 padlr5 bdbso padt6 padb3">
            <div class="list-style-2 flrc">
                <div class="flex1">地区选择器</div>
                <div class="pos-r"><mu-button color="primary" round @click="pcaShowFunc()"> 确定 </mu-button></div>
            </div>
            <div class="flrc tac mart5">
                <div class="flex1" :class="pcaStep == 1?'fwb c13 bc12':''">省份</div>
                <div class="flex1" :class="pcaStep == 2?'fwb c13 bc12':''">城市</div>
                <div class="flex1" :class="pcaStep == 3?'fwb c13 bc12':''">县区</div>
            </div>
        </div>
        <div class="pad5 mart50 c12 fs8 lh2">
            <div v-if="pcaStep == 1">
                <div @click="pcaShowFunc()" class="pad5 bdbdo pos-r">不限制 <mu-ripple></mu-ripple></div>
                <div @click="setP(pIndex,p)" class="pad5 bdbdo pos-r" v-for="p,pIndex in orgData">[[p.name]] <mu-ripple></mu-ripple></div>
            </div>
            <div v-if="pcaStep == 2">
                <div @click="pcaShowFunc()" class="pad5 bdbdo pos-r">不限制 <mu-ripple></mu-ripple></div>
                <div @click="setC(cIndex,c)" class="pad5 bdbdo pos-r" v-for="c,cIndex in pro.sons">[[c.name]] <mu-ripple></mu-ripple></div>
            </div>
            <div v-if="pcaStep == 3">
                <div @click="pcaShowFunc()" class="pad5 bdbdo pos-r">不限制 <mu-ripple></mu-ripple></div>
                <div @click="setA(aIndex,a)" class="pad5 bdbdo pos-r" v-for="a,aIndex in cit.sons">[[a.name]] <mu-ripple></mu-ripple></div>
            </div>
        </div>
    </div>

{#    <div style="background-size: cover;background-image: url('');"></div>#}
{% endblock %}
   {% block myJs %}
       <script src="{{ root }}/js/city.js{{ rnd }}"></script>
       <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/crypto/crypto.js"></script>
       <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/hmac/hmac.js"></script>
       <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/sha1/sha1.js"></script>
       <script type="text/javascript" src="{{ root }}/assets/oss/lib/base64.js"></script>
       {#<script type="text/javascript" src="{{ root }}/assets/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>#}
       <script type="text/javascript" src="{{ root }}/assets/oss/uploadMy.js{{ rnd }}"></script>
   {% endblock %}
